<template>
  <div class="container">
    <div class="item">
      <HPGeneral />
      <!-- <Course /> -->
    </div>

    <div class="item">
      <HPCloud />
    </div>

    <div class="item">
      <HPAdvice />
    </div>

    <div class="item">
      <HPLineCharts />
    </div>

    <div class="item">
      <HPHot />
    </div>

    <div class="item">
      <HPSort />
      <!-- <HPStatics /> -->
    </div>
  </div>
</template>

<script>
import HPSort from "./HPSort.vue";
// import HPHot from "./HPHot.vue"
import HPHot from "./HPHot.vue";
import Course from "./Course.vue";
import HPCloud from "./HPCloud.vue";
import HPGeneral from "./HPGeneral.vue";
import HPLineCharts from "./HPLineCharts.vue";
import HPAdvice from "./HPAdvice.vue";
</script>

<style>
/* 因为要统一对每个item进行配置颜色，所以这个地方没有加上scoped */
h3 {
  /* background-color: #90e0ef; */
  color: black;
  padding: 0.5vh 1vw;
  margin: 0;
  font-family: "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
    "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  /* text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); */
  /* border-bottom: 3px solid #0077b6; */
}
</style>


<style scoped>

.container {
  height: 90vh;
  width: 98vw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px; /*可以根据需要调整间距*/
  box-sizing: border-box;
  margin-left: 0.5vw;
}

.item {
  margin: 10px;
  padding: 20px;
  background-color: rgb(0,0,0,0.05);
  /* background-color: #caf0f8; 设置元素背景颜色 */
  text-align: center; /* 居中文本 */
  height: 45vh;
  border-radius: 10px;
}
</style>
